import React, { forwardRef, useState, useEffect } from 'react'
import './style/Newinfo1.scss'
// import style from './Animalmanagement.module.css'
import * as echarts from "echarts";
const Newinfo1 = forwardRef((props, ref) => {
   const [infodata, setdata] = useState([])
   const getdata = () => {
      // setdata(ref)

   }

   const drawbar = () => {

      const time = ['2023-1', '2023-2', '2023-3', '2023-4', '2023-5', '2023-6', '2023-7', '2023-8']
      const data = [
         { name: '降雨', data: [100, 200, 300, 400, 500, 600, 500, 600] },
         { name: '湿度', data: [200, 300, 400, 33, 200, 500, 700, 800] },
      ]
      var myChart = echarts.init(document.getElementById("Newinfo1_barli"));
      var option = {
         backgroundColor: 'rgba(0, 55, 107)',
         color: ['rgba(28, 205, 255)', 'rgba(47, 255, 208)'],
         title: {
            text: "2023年降雨与湿度",
            // subtext: "Sub Title",
            left: "left",
            top: "top",
            textStyle: {
              fontSize: 20,
              color: "rgba(252, 252, 252, 1)"
            },
            subtextStyle: {
              fontSize: 20
            }
          },
         tooltip: {
            trigger: 'axis',
            borderWidth: 0,
            backgroundColor: 'rgba(1, 65, 122,0.5)',
            textStyle: { // 添加 textStyle 属性
               color: '#fff' // 设置字体颜色
            },
            // valueFormatter: (params) => {
            //    return params + 'kg'
            // }
            formatter: function (params) {
               const time = params[0].name || ''
               const before = params[0] || ''
               const after = params[1] || ''
               // 使用CSS样式来设置marker的形状为方形
               const beforeMarkerStyle = 'display: inline-block; width: 5px; height: 14px; margin-right:3px; background-color: ' + before.color + ';';
               const afterMarkerStyle = 'display: inline-block; width: 5px; height: 14px; margin-right:3px; background-color: ' + after.color + ';';
               const beforeContent = before ? `${'<span style="' + beforeMarkerStyle + '"></span>'} 降雨: ${before.value ?? ''} ml <br />` : ''
               const afterContent = after ? `${'<span style="' + afterMarkerStyle + '"></span>'} 湿度: ${after.value ?? ''} ml <br />` : ''
               return `${time}<br/>${beforeContent}${afterContent}`
            },
         },
         legend: {
            icon: 'stack',
            itemWidth: 10,
            itemHeight: 5,
            textStyle: {
               fontSize: 14,
               color: '#e0e1e2', // 设置字体颜色
               padding: [10, 10] // 设置文字与图例的距离
            },
            itemGap: 20,// 设置图例项之间的间距
            itemStyle: {
               borderWidth: 0
            }
         },
         grid: {
            left: '10%',
            right: '10%',
            bottom: '10%',
            top: '20%',
            containLabel: true,
         },
         xAxis: {
            type: 'category',
            boundaryGap: true,//两侧留白
            axisLine: {
               lineStyle: {
                  color: 'rgba(2, 119, 175)',
                  width: 2,
                  type: 'solid',
               },
               show: true,
               onZero: false // 将 x 轴坐标轴置于最低刻度上
            },
            axisPointer: {
               type: 'line',
               lineStyle: {
                  color: {
                     type: 'line',
                     x: 0,
                     y: 0,
                     x2: 1,
                     y2: 1,
                     colorStops: [{
                        offset: 0, color: 'rgba(38, 159, 193,.5)' // 100% 处的颜色
                     }, {
                        offset: 1, color: 'rgba(38, 159, 193,.5)' // 0% 处的颜色  #000613','#00334f', '#77f0ff'
                     }],
                  },
                  type: 'solid',
                  width: 24
               },
            },
            axisLabel: {
               interval: 1,
               color: 'rgba(255,255,255)', //更改坐标轴文字颜色
               fontSize: 12, //更改坐标轴文字大小
               margin: 20
            },
            axisTick: {
               show: true,
               alignWithLabel: true,
               lineStyle: {
                  color: 'rgba(2, 119, 175)', // 刻度线颜色
                  width: 2, // 刻度线宽度
               },
               length: 6, // 刻度线的长度
            },
            data: time,
         },
         yAxis: [
            {
               // name: '温度',
               type: 'value',
               min: "0",
               // max: 100,
               splitLine: {
                  show: false
               },
               splitLine: {
                  interval: 0,
                  show: true, // 开启分割线
                  lineStyle: {
                     color: 'rgba(6, 88, 142)',
                     width: 2,
                     type: [6, 3],
                  },
               },
               axisTick: {
                  show: false
               },
               axisLine: {
                  show: false
               },
               axisLabel: {
                  color: 'rgba(207, 219, 230)'
               },
               position: 'left',
            }
         ],
         series: [{
            name: '降雨',
            type: 'line',
            symbol: 'circle',
            emphasis: {
               focus: 'series',//高亮显示
            },
            symbolSize: 8,
            data: data[0].data,
            smooth: false,//曲线
            itemStyle: {
               // 折线拐点标志的样式
               borderColor: 'rgba(255,255,255)',
               borderWidth: 2
            },
            // z: 2,
            areaStyle: {
               normal: {
                  color: new echarts.graphic.LinearGradient(
                     0,
                     0,
                     0,
                     1,
                     [
                        {
                           offset: 0,
                           color: "rgba(23, 103, 144)"
                        },
                        {
                           offset: 0.5,
                           color: "rgba(29, 120, 159)"
                        },
                        {
                           offset: 1,
                           color: "rgba(2, 71, 135)"
                        }
                     ],
                  )
               }
            }
         },
         {
            name: '湿度',
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            data: data[1].data,
            smooth: false,//曲线
            itemStyle: {
               //折线拐点标志的样式
               borderColor: 'rgba(255,255,255)',
               borderWidth: 2
            },
            emphasis: {
               focus: 'series',//高亮显示
            },
            areaStyle: {
               normal: {
                  color: new echarts.graphic.LinearGradient(
                     0,
                     0,
                     0,
                     1,
                     [
                        {
                           offset: 0,
                           color: "rgba(41, 122, 129)"
                        },
                        {
                           offset: 0.5,
                           color: "rgba(23, 97, 127)"
                        },
                        {
                           offset: 1,
                           color: "rgba(2, 71, 135)"
                        }
                     ],
                  )
               }
            }
         },

         ]
      };
      myChart.setOption(option)

      // console.log(timer);
      window.onresize = () => {
         myChart.resize();
      }

   }
   const drawbar2 = () => {
      const yData = [1232, 1452, 1567, 1783, 2020]

      var myChart = echarts.init(document.getElementById("Newinfo1_barli2"));
      var option = {
         backgroundColor: 'rgba(0, 55, 107)',
         title: {
            text: "历年降雨总量",
            // subtext: "Sub Title",
            left: "left",
            top: "top",
            textStyle: {
              fontSize: 20,
              color: "rgba(252, 252, 252, 1)"
            },
            subtextStyle: {
              fontSize: 20
            }
          },
         tooltip: {
            trigger: 'axis',
            axisPointer: {
               type: 'shadow'
            }
         },
         legend: {
            icon: 'stack',
            itemWidth: 10,
            itemHeight: 5,
            textStyle: {
               fontSize: 14,
               color: '#e0e1e2', // 设置字体颜色
               padding: [10, 10] // 设置文字与图例的距离
            },
            itemGap: 20,// 设置图例项之间的间距
            itemStyle: {
               borderWidth: 0
            }
         },
         grid: {
            bottom: '8%',
            left: '4%',
            right: '4%',
            containLabel: true
         },
         xAxis: {
            data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
            axisTick: {
               show: false
            },
            axisLabel: {
               interval: 1,
               color: 'rgba(255,255,255)', //更改坐标轴文字颜色
               fontSize: 12, //更改坐标轴文字大小
               margin: 20
            },
         },
         yAxis: [
            {
               // name: '温度',
               type: 'value',
               min: "0",
               // max: 100,
               splitLine: {
                  show: false
               },
               splitLine: {
                  interval: 0,
                  show: true, // 开启分割线
                  lineStyle: {
                     color: 'rgba(6, 88, 142)',
                     width: 2,
                     type: [6, 3],
                  },
               },
               axisTick: {
                  show: false
               },
               axisLine: {
                  show: false
               },
               axisLabel: {
                  color: 'rgba(207, 219, 230)'
               },
               position: 'left',
            }
         ],
         series: {
            name: '降雨总量',
            type: 'bar',
            barWidth: '20%',
            itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: 'rgba(84,115,232,1)'
                  },
                  {
                     offset: 1,
                     color: 'rgba(24,144,255,0.6)'
                  }
               ])
               // shadowColor: '#3C97F2',
               // shadowBlur: 5,
            },
            label: {
               normal: {
                  show: true,
                  position: 'top',
                  fontSize: 12
               }
            },
            data: yData
         }
      }
      myChart.setOption(option)

      // console.log(timer);
      window.onresize = () => {
         myChart.resize();
      }

   }

   useEffect(() => {
      drawbar()
      drawbar2()
      console.log(infodata);
      getdata()

   }, [])
   // console.log(ref);
   return (
      <div className='Newinfo1_showli'>
         {/* {drawlist()} */}
         <div id='Newinfo1_barli'></div>
         <div id='Newinfo1_barli2'></div>
      </div>
   )
})

export default Newinfo1